<template>
  <div class="hello" style="width:100%;display:flex;align-item:center;justify-content: center;margin-top:50px;">
    <input type="text" style="padding:10px;width:40%;" v-model="longUrl" placeholder="请输入https://xxx.xxx" />
    <button style="width:100px;margin-left:10px;" @click="getLink">click</button>
  </div>
</template>

<script>
const validUrl=require("valid-url")
export default {
  name: "input-box",
  props: {
    msg: String,
  },
  data(){
    return {
      longUrl:'',
      config:{
        message:'',
        status:false,
        link:''
      }
    }
  },
  methods:{
    getLink(){
      this.config.status=true;
      this.config.link =this.longUrl;
      this.config.message=""
      if(!this.longUrl.replace(/\s*/g,'')&&this.config.status){
        this.config.message="长链接不能为空"
        this.config.status=false
      }
      if(!validUrl.isUri(this.longUrl)&&this.config.status){
        this.config.message="长链接格式错误"
        this.config.status=false
      }
      this.$bus.$emit('sendLongUrl',this.config)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
  
}
</style>
